一覧に戻る

MapLibre GL JSで時系列コントロールを扱う[maplibre-gl-temporal-control]

#JavaScript#TypeScript#mapbox-gl-js#MapLibre

TL;DR

  • MapLibre GL JSで時系列表示をするためのプラグインmaplibre-gl-temporal-controlを開発したよ
  • npm install mapligre-gl-temporal-controlで使えるよ

maplibre-gl-temporal-control

https://github.com/Kanahiro/maplibre-gl-temporal-control

examples

usage

npm install maplibre-gl-temporal-control


const map = new maplibregl.Map(mapOptions)

// anyLayerはmaplibreレイヤーのオブジェクト
map.addLayer(anyLayer1_1)
map.addLayer(anyLayer1_2)
map.addLayer(anyLayer2_1)
map.addLayer(anyLayer2_2)
map.addLayer(anyLayer3_1)
map.addLayer(anyLayer3_2)

import TemporalControl from 'maplibre-gl-temporal-control';

// アニメ表示の各フレームを定義
const temporalFrames = [
    {
        title:'frame1', // 時系列コントロールに表示されるタイトル
        layers:[anyLayer1_1, anyLayer1_2] // 1フレームに表示したいレイヤーの配列
    },
        title:'frame2',
        layers:[anyLayer2_1, anyLayer2_2]
    },
    {
        title:'frame3',
        layers:[anyLayer3_1, anyLayer3_2]
    },
    // 任意の数のフレーム
]

const temporalControl = new TemporalControl(temporalFrames, {
    interval: 100, // 1フレームあたりの表示秒数、ms単位
    position: 'top-left',
    performance: true // アニメ表示のパフォーマンスを向上させるフラグ
});
map.addControl(temporalControl);

ポイント

  • Mapに追加したレイヤーオブジェクトと同じ内容のオブジェクトでフレームを生成しましょう（同じインスタンスである必要はない）
  • performance: trueの場合、描画パフォーマンス向上のため、本来ゼロとする透過度を0.000000000000000000001とする（ベクター限定）
    • このオプションは通常の用途では設定不要です、もし大量のベクターデータの描画が遅かったりしたら試してみてください

技術メモ

  • TypeScriptで開発
  • CSSをファイルで定義すると、importしたりめんどうくさいので、すべてコード上で定義
  • 同じような理由で、再生ボタンなどのアイコンはすべてbase64文字列として保持、ファイルサイズが小さいので容量増加のデメリットは無視